<template>
	<view>
		<view>
			<view>
				<view class='header'>
					<u-image class="avatar" width="200" height="200" border-radius="50%" :src="avatar"></u-image>
				</view>
				<view class='content'>
					<view>申请获取以下权限</view>
					<text>获得你的公开信息(昵称，头像、地区等)</text>
				</view>
				<!-- open-type开放能力wx.getUserInfo(OBJECT) 注意：此接口有调整，使用该接口将不再出现授权弹窗，请使用
				引导用户主动进行授权操作
				当用户未授权过，调用该接口将直接报错 当用户授权过，可以使用该接口获取用户信息
				如上文，之前用户未授权过时，调用wx.getUserInfo会调出授权框；但现在在用户未授权过时调用该接口，会直接走fail方法 -->

				<!-- Vue在发起跨域请求时，后端已经开启CORS，前端需要也携带cookie，此时需要在前端请求头加上withCredentials: true，表示请求可以携带cookie -->
				<button class='bottom' v-if="!show" withCredentials="true" lang="zh_CN" hover-class="hoverTrans"
					@click="appLoginWx">
					授权登录信息
				</button>
				<button class='bottom' v-else withCredentials="true" lang="zh_CN" open-type="getPhoneNumber"
					hover-class="hoverTrans" @getphonenumber="getphonenumber">
					请授权手机号码
				</button>
				<view class="cancle" @click="$api.swichTo('pages/index/index')">先不登录，再去瞧瞧</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				avatar: '',
				sessionKey: ''
			}
		},
		onLoad() {

		},
		methods: {
			async appLoginWx() {
				var data = await this.$api.getUserProfile()
				this.avatar = data.userInfo.avatarUrl
				var {
					code
				} = await this.$api.getCode()
				this.$api.loading(true, '登录中...')
				var res = await this.$api.Post('user/wechatLogin', {
					code,
					nickname: data.userInfo.nickName,
					avatar: data.userInfo.avatarUrl
				})
				this.$api.loading(false)
				if (res.code == 1) {
					uni.setStorageSync('token', res.data.userinfo.token)
					this.sessionKey = res.data.session_key
					if (res.data.userinfo.mobile) {
						this.$store.dispatch('getUserinfo')
						this.$api.toast('登陆成功', 'success')
						this.$api.navBack(1, 2000)
					} else this.show = true
				} else this.$api.toast(res.msg, 'none')
			},
			//授权手机号
			async getphonenumber(e) {
				this.$api.loading(true, '授权中...')
				var res = await this.$api.Get('user/getMobile', {
					sessionKey: this.sessionKey,
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData
				})
				this.$api.loading(false)
				if (res.code == 1) {
					this.$store.dispatch('getUserinfo')
					this.$api.toast('登陆成功', 'success')
					this.$api.navBack(1, 2000)
				} else this.$api.toast(res.msg, 'none')
			}
		}
	}
</script>

<style lang="scss">
	.header {
		margin: 90rpx 0 90rpx 50rpx;
		border-bottom: 1px solid #ccc;
		width: 650rpx;
		height: 300rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.logo {
			width: 300rpx;
			height: 100rpx;
		}

		.avatar {
			margin: 20rpx 0 10rpx;
		}
	}

	.content {
		margin-left: 50rpx;
		margin-bottom: 90rpx;
	}

	.content text {
		display: block;
		color: #9d9d9d;
		margin-top: 40rpx;
	}

	.bottom {
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		margin: 70rpx 50rpx;
		font-size: 39rpx;
		color: #FFFFFF;
		background-color: #46bcc8;
	}


	.btn {
		display: block;
		width: 200rpx;
		height: 200rpx;
		background-color: pink;
	}

	.cancle {
		margin-top: 350rpx;
		display: flex;
		justify-content: center;
	}
</style>
